<!-- 个人信息 -->
<template>
  <view class="infomation">
    <PageWarpper page-name="个人信息">
      <template v-slot:main>
        <view class="info border-top border-bottom d-flex">
          <view
            class="thumb bg-cover"
            :style="{
              backgroundImage:
                'url(' + (imgUrl ? imgUrl : 'https://bac-miniprogram.oss-cn-beijing.aliyuncs.com/images/icon/default_avatar.png') +')',
            }"
          >
            <button @tap="chooseImage">选择图片</button>
          </view>
          <view class="detail">
            <view class="border-bottom tip siyuan-medium">点击头像修改</view>
            <view class="label d-flex">
              <text for="" class="siyuan-medium">昵称</text>
              <input
                type="text"
                class="siyuan-medium"
                v-model="inputValue"
                placeholder="请输入昵称"
                placeholder-class="placeholder-text"
              />
            </view>
            <view class="label d-flex">
              <text class="siyuan-medium">手机号</text>
              <text class="intel-one-mono-medium" v-if="userInfo && userInfo.phone">
                {{ userInfo.phone.substr(0, 3) + "****" + userInfo.phone.substr(7) }}
              </text>
            </view>
          </view>
        </view>
        <!-- 列表 -->
        <Menus :list="list" :gap-number="8.8" @btnClick="btnClick" />
      </template>
    </PageWarpper>
    <FooterBar :tab-index="2" />
  </view>
</template>

<script setup>
import PageWarpper from "@/components/Layer/PageWarpper.vue";
import FooterBar from "@/components/FooterBar/index.vue";
import Menus from "@/components/List/Menus.vue";
import { getUserInfo, saveUserInfo } from "@/server/api.js";
import { onMounted, ref } from "vue";

import { useStore } from "vuex";
const store = useStore();

let imgUrl = ref(""); // 头像
let inputValue = ref(""); // 昵称
let userInfo = ref({}); // 获取用户信息

let list = ref([
  {
    name: "保存",
    es_name: "Saving",
    path: "",
  },
  {
    name: "退出登录",
    es_name: "Log Out",
    path: "",
  },
]);

// 上传图片
const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ["compressed"],
    sourceType: ["album", "camera"], // 来源：相册或相机
    success: async res => {
      console.log(res);
      const tempFilePaths = res.tempFilePaths;
      let suffex = res.tempFilePaths[0].split(".")[1];
      let fileName = "user_avatar_" + new Date().getTime() + "." + suffex;
      uni.uploadFile({
        url: "https://brita2024.com/basic-api/front/oss/ossFileUpload",
        filePath: tempFilePaths[0],
        name: "file",
        formData: {
          fileName: fileName,
        },
        success(uploadres) {
          console.log(uploadres, "上传成功");
          if (JSON.parse(uploadres.data).code == 2000) {
            imgUrl.value = JSON.parse(uploadres.data).data;
          }
        },
      });
    },
  });
};

let getInfo = () => {
  getUserInfo().then(res => {
    userInfo.value = res.data;
    imgUrl.value = res.data.headUrl;
    inputValue.value = res.data.nickname;
  });
};
getInfo();

const btnClick = item => {
  if (item.es_name == "Log Out") {
    uni.removeStorageSync("userToken");
	uni.removeStorageSync('verStaff');
    store.commit("setUserToken", "");
    uni.switchTab({
      url: "/pages/index/index",
    });
    return;
  }

  if (!inputValue.value) {
    uni.showToast({
      title: "昵称不能为空",
      icon: "none",
    });
    return;
  }
  if (!imgUrl.value) {
    uni.showToast({
      title: "请上传头像",
      icon: "none",
    });
    return;
  }
  saveUserInfo({
    headUrl: imgUrl.value,
    nickname: inputValue.value,
  }).then(res => {
    uni.showToast({
      title: "保存成功",
      icon: "none",
    });
  });
};
</script>

<style lang="scss" scoped>
#app.content {
  padding-bottom: 0px;
}
.page-name {
  padding-bottom: 74rpx;
}
.info {
  background-color: #ffffff;
  .thumb {
    position: relative;
    width: 204rpx;
    height: 204rpx;
    button {
      width: 100%;
      height: 100%;
      opacity: 0;
      filter: alpha(opacity=0);
    }
  }
  .detail {
    flex: 1;
    .tip {
      padding: 14rpx 0 14rpx 70rpx;
      font-size: 24rpx;
      line-height: 40rpx;
    }

    .label {
      padding-left: 70rpx;
      margin-bottom: 20rpx;
      align-items: center;
      font-size: 24rpx;
      text:first-child {
        width: 138rpx;
        display: inline-block;
      }
    }
    .tip + .label {
      margin-top: 20rpx;
    }
    input {
      font-weight: 600;
    }
  }
}
</style>
